<template>
	<view class="dec-search" :style="[wrapStyle]">
		<view class="search-center" :style="[decStyle]" @click="goTarget">
			<uv-icon name="search" size="40"></uv-icon>
			<text class="color3 font-30 ml-10">请点击进行搜索</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			}
		},
		props: {
			content: {
				type: Object,
				default: () => {}
			}
		},
		computed: {
			decStyle() {
				let styleObj = {
					marginTop: `${this.content.marginTop*2 || 0}rpx`,
					marginBottom: `${this.content.marginBottom*2 || 0}rpx`,
					marginLeft: `${this.content.marginLeft*2 || 0}rpx`,
					marginRight: `${this.content.marginRight*2 || 0}rpx`,
					borderRadius: this.content.borderRadius ? '100rpx' : '',
				};
				if(this.content.bgImg) {
					styleObj.borderColor = 'none';
				} else {
					if(this.content.bgColor === '#fff' || this.content.bgColor === '#FFF' || this.content.bgColor === '#ffffff' || this.content.bgColor === '#FFFFFF') {
						styleObj.borderColor = '#999';
					} else {
						styleObj.borderColor = this.content.bgColor || '#999';
					}
				}
				return styleObj;
			},
			wrapStyle() {
				let styleObj = {};
				if (this.content.bgImg) {
					styleObj.background = `url(${this.content.bgImg}) no-repeat`;
					styleObj.backgroundSize = '100% auto';
				} else {
					styleObj.backgroundColor = this.content.bgColor;
				}
				return styleObj;
			}
		},
		methods: {
			goTarget() {
				console.log(1111)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.dec-search {
		display: flex;
		width: 750rpx;
	}
	
	.search-center {
		display: flex;
		align-items: center;
		width: 100%;
		height: 68rpx;
		background-color: #fff;
		border: 1px solid #999;
		padding-left: 30rpx;
	}
</style>